<template>
  <div>
    <ul>
      <!-- 通过v-for遍历数组并生成小li  其中每一项的item为遍历到的key -->
      <li v-for="item in arr" :key="item">{{ item }}</li>
      <button @click="btnFn">走一走</button>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['帅哥', '美女', '程序猿'],
    }
  },
  methods: {
    btnFn() {
      // 将第一项push到数组的最后一项，再删除第一项即可
      this.arr.push(this.arr[0])
      this.arr.shift()
    },
  },
}
</script>

<style scoped></style>
